import React, { Component } from 'react';
import ReactDom from 'react-dom';
import { FormattedMessage, injectIntl } from 'react-intl';
import { actions } from "mirrorx";
import { Message, Button, Modal, Table } from "tinper-bee";
import Radio from 'bee-radio';
import moment from 'moment'
import Grid from 'components/Grid';
import DatePicker from "bee-datepicker";
import FormError from 'components/FormError';
import RefComponent from 'components/RefComponent';
import FormList from 'components/FormList'
import {ts2Formatter} from 'utils';

import dragColumn from "tinper-bee/lib/dragColumn.js";
import './index.less'

let ComplexTable = dragColumn(Table);

import './index.less';
let { RangePicker } = DatePicker;

const FormItem = FormList.Item;

class ShowApprovalModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }

    }

    componentWillReceiveProps(nextProps){
        let {selectData,ButtonType,showApprovalModalModal,billType,printTemplateId} = nextProps;
        if(ButtonType == "ButtonApprove" && printTemplateId && showApprovalModalModal) {
            let param = {
                data:{
                    billId:selectData[0].id,
                    billType:billType,
                    printTemplateId:printTemplateId,
                },
                callback:(data)=>{
                    this.setState({htmldata:data});
                }
            }
            actions.ApprovalModel.onGetHtml(param);
        }
    }

    componentDidMount() {
        
    }

    onApprovalModal = () => {
        let {ButtonType,selectData,printTemplateId } = this.props;
        this.props.form.validateFields((err, _values) => {
            let param;
            if (err) {
                Message.create({ content: '请输入值', color: 'warning' });
            } else {
                
                if(ButtonType == "ButtonApprove") {
                    if(printTemplateId) {
                        let dom = ReactDom.findDOMNode(this.refs.htmliframe);
                        dom.html = "";
                    }
                    // if(_values.isAgree == "agreee") {}
                    param = {
                        note: _values.comment,
                        type: _values.isAgree,
                        id:selectData[0].id,
                    }
                }
                this.props.onCloseApproval(param || true);
            }
        })
    }

    openUrl = () => {
        let {htmldata} = this.state;
        window.open(htmldata);
    }

    

    render() {
        let { showApprovalListModal,onCloseApproval,approveList } = this.props;
        let { getFieldProps, getFieldError } = this.props.form;

        let self = this;
        let column = [
            {
                title: "是否审批",
                dataIndex: "finish",
                key: "finish",
                width:90,
                render:(text) => {
                     text = text?"是":"否";
                     return text;
                }
            },
            {
                title: "节点名称",
                dataIndex: "name",
                key: "name",
                width:90,
            },
            {
                title: "操作",
                dataIndex: "operate",
                width:90,
                key: "operate",
            },
            {
                title: "审核人",
                dataIndex: "assigneeName",
                width:90,
                key: "assigneeName",
            },
            {
                title: "审批意见",
                dataIndex: "taskComment",
                key: "taskComment",
            },
            {
                title: "处理时间",
                dataIndex: "endTime",
                key: "endTime",
                width:90,
                render:(text) => {
                    return text && ts2Formatter(text,1);
                }
            },
            {
                title: "发送时间",
                dataIndex: "startTime",
                key: "startTime",
                width:90,
                render:(text) => {
                    return text && ts2Formatter(text,1);
                }
            }
        ]
        return (
            <Modal
                size={"xlg"}
                show={showApprovalListModal}
                onHide={()=>onCloseApproval(false)} >
                <Modal.Header>
                    <Modal.Title>审批流</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <div>
                        <Grid 
                            dragborder = {true}
                            columns={column}
                            multiSelect={false}
                            paginationObj={"none"}
                            data={approveList}
                        />
                    </div>
                    
                    <div className="footer-button">
                        <Button onClick={()=>onCloseApproval(false)} style={{ marginRight: 10 }}><FormattedMessage id="js.Ref.Ref224.0012" defaultMessage="关闭" /></Button>
                        {/* <Button onClick={this.onApprovalModal} ><FormattedMessage id="js.com.Pas.0005" defaultMessage="确定" /></Button> */}
                    </div>
                </Modal.Body>
            </Modal>

        )
    }
}

export default FormList.createForm()(injectIntl(ShowApprovalModal))
